<template>
  <div class="issue-news-box">
    <PageLayout type="issueNews">
      <div class="profile-right">
        <div class="profile-right-title">信息发布</div>
        <div class="profile-right-split"></div>

        <div class="profile-right-row">
          <div class="profile-right-item">
            <div class="profile-right-input-title"><span class="require-input">*</span>所属模块</div>
            <div class="payment-input-selector">
              <el-select v-model="moduleValue" placeholder="请选择" style="width: 100%" @change="moduleChanged()">
                <el-option v-for="item in moduleOptions" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <div style="width: 50px"></div>

          <div class="profile-right-item">
            <div class="profile-right-input-title"><span class="require-input">*</span>所属分类</div>
            <div class="payment-input-selector">
              <el-select v-model="categoryValue" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in categoryOptions" :key="item.value" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>

          <!-- <div class="profile-right-item">
            <div class="profile-right-input-title"><span class="require-input">*</span>所属分类</div>
            <div class="payment-input-selector">
              <el-cascader
                v-model="firstName"
                :options="categoryOptions"
                placeholder="请选择"
                style="width: 100%"
              ></el-cascader>
            </div>
          </div> -->
        </div>

        <div class="profile-right-row">
          <div class="profile-right-item">
            <div class="profile-right-input-title"><span class="require-input">*</span>有效期</div>
            <div class="payment-input-selector">
              <el-select v-model="validDateValue" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in validDateOptions" :key="item.name" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </div>
          </div>

          <div style="width: 50px"></div>

          <div class="profile-right-item"></div>
        </div>

        <div class="profile-right-row">
          <div class="profile-right-item">
            <div class="profile-right-input-title"><span class="require-input">*</span>信息标题</div>
            <div class="profile-right-input-content">
              <el-input v-model="title" placeholder="请输入" clearable maxlength="200"></el-input>
            </div>
          </div>
        </div>

        <div class="profile-right-row">
          <div class="profile-right-item">
            <div class="profile-right-input-title"><span class="require-input">*</span>内容详情</div>
            <div class="profile-right-input-content-t">
              <el-input
                v-model="desc"
                placeholder="请输入"
                type="textarea"
                rows="5"
                clearable
                maxlength="2999"
              ></el-input>
            </div>
          </div>
        </div>

        <div class="profile-right-row">
          <div class="profile-right-item">
            <div class="profile-right-input-title"><span class="require-input">*</span>联系人</div>
            <div class="profile-right-input-content">
              <el-input v-model="contactor" placeholder="请输入" clearable maxlength="99"></el-input>
            </div>
          </div>

          <div style="width: 50px"></div>

          <div class="profile-right-item">
            <div class="profile-right-input-title"><span class="require-input">*</span>联系电话</div>
            <div class="profile-right-input-content">
              <el-input v-model="phone" placeholder="请输入" clearable maxlength="20"></el-input>
            </div>
          </div>

          <div style="width: 50px"></div>

          <div class="profile-right-item">
            <div class="profile-right-input-title">联系邮箱</div>
            <div class="profile-right-input-content">
              <el-input v-model="email" placeholder="请输入" clearable maxlength="20"></el-input>
            </div>
          </div>
        </div>

        <div class="profile-right-row">
          <div class="profile-right-item">
            <div class="profile-right-input-title"><span class="require-input">*</span>上传图片</div>
            <div class="profile-right-input-content-t">
              <UploadImageForm
                :fileList="imageList"
                :disabled="imageList.length >= 5"
                @uploaded="badPicsUploadedAction"
                @removed="removedImageAction"
              />
            </div>
          </div>
        </div>

        <div style="display: flex; justify-content: flex-end; margin-right: 50px">
          <div v-if="submitLoading" class="profile-right-save-btn nac">
            <el-icon class="el-icon-loading"></el-icon>正在提交...
          </div>
          <div v-else class="profile-right-save-btn nas tse" @click="commit()">提 交</div>
        </div>

        <div style="height: 20px"></div>
      </div>

      <div style="height: 40px"></div>
    </PageLayout>
  </div>
</template>

<script>
import { commitIssueNews, getNewsCategoryList } from '@/api/api'

import PageLayout from '@/components/pageLayout/index'
import UploadImageForm from '@/components/uploadImageForm/index'

export default {
  name: 'issueNews',
  components: {
    PageLayout,
    UploadImageForm
  },

  data() {
    return {
      submitLoading: false,

      moduleValue: 1,
      moduleOptions: [
        {
          name: '生活服务',
          value: 1
        },
        {
          name: '商务服务',
          value: 2
        },
        {
          name: '宠物',
          value: 3
        }
      ],

      categoryValue: '',
      categoryOptions: [],

      validDateValue: '长期有效',
      validDateOptions: [
        {
          name: '长期有效'
        },
        {
          name: '一周'
        },
        {
          name: '一个月'
        },
        {
          name: '三个月'
        },
        {
          name: '一年'
        }
      ],

      title: '',
      desc: '',
      contactor: '',
      phone: '',
      email: '',

      imageList: []
    }
  },

  metaInfo() {
    return {
      title: this.$store.state.common.pageTitle,
      meta: [
        { name: 'keywords', content: this.$store.state.common.pageKeywords },
        { name: 'description', content: this.$store.state.common.pageDescription }
      ]
    }
  },

  mounted() {
    this.__getNewsCategoryList()
  },

  methods: {
    moduleChanged() {
      this.categoryValue = ''
      this.categoryOptions = []

      this.__getNewsCategoryList()
    },

    badPicsUploadedAction(item) {
      const picItem = {
        id: item.uid,
        url: this.$filePrefixUrl + item.url,
        url2: item.url
      }

      this.imageList.push(picItem)
    },

    removedImageAction(uid) {
      for (let index = 0; index < this.imageList.length; index++) {
        if (this.imageList[index].id === uid) {
          this.imageList.splice(index, 1)
          break
        }
      }
    },

    async __getNewsCategoryList() {
      const res = await getNewsCategoryList(this.moduleValue)

      if (res && res.code === 200 && res.result && res.result.length > 0) {
        this.categoryOptions = res.result
        this.categoryValue = this.categoryOptions[0].id
      }
    },

    async commit() {
      if (!this.moduleValue) {
        this.$toast('请选择所属模块', {
          type: 'error'
        })
        return
      }

      if (!this.categoryValue) {
        this.$toast('请选择所属分类', {
          type: 'error'
        })
        return
      }

      if (!this.validDateValue) {
        this.$toast('请选择有效期', {
          type: 'error'
        })
        return
      }

      if (!this.title) {
        this.$toast('请输入标题', {
          type: 'error'
        })
        return
      }

      if (!this.desc) {
        this.$toast('请输入内容详情', {
          type: 'error'
        })
        return
      }

      if (!this.contactor) {
        this.$toast('请输入联系人', {
          type: 'error'
        })
        return
      }

      if (!this.contactor) {
        this.$toast('请输入联系电话', {
          type: 'error'
        })
        return
      }

      if (this.imageList.length === 0) {
        this.$toast('请上传图片', {
          type: 'error'
        })
        return
      }

      if (this.imageList.length > 5) {
        this.$toast('最多只能上传5张图片', {
          type: 'error'
        })
        return
      }

      const tempArr = []
      if (this.imageList.length > 0) {
        this.imageList.forEach((element) => {
          tempArr.push(element.url2)
        })
      }

      this.submitLoading = true
      const res = await commitIssueNews({
        typeId: this.moduleValue,
        typeItemId: this.categoryValue,
        termOfVvalidity: this.validDateValue,
        title: this.title,
        contentInfo: this.desc,
        contactsName: this.contactor,
        phone: this.phone,
        email: this.email,
        imgList: tempArr.length > 0 ? tempArr.join(',') : ''
      }).catch(() => {
        this.submitLoading = false
      })
      this.submitLoading = false

      if (res && res.code === 200) {
        this.$toast('发布成功', {
          type: 'success'
        })

        this.title = ''
        this.desc = ''
        this.contactor = ''
        this.phone = ''
        this.qq = ''
        this.imageList = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.issue-news-box {
  .profile-right {
    margin-left: 220px;
    width: 1000px;

    flex: 1;

    border-radius: 8px;
    background: #f7f7f7;

    .profile-right-title {
      padding-top: 24px;
      padding-bottom: 24px;
      padding-left: 20px;
      font-size: 20px;
      font-weight: 400;
      color: #29435f;
    }

    .profile-right-split {
      margin-bottom: 45px;
      width: 100%;
      height: 1px;
      background: #d7d8dd;
    }

    .profile-right-row {
      padding-left: 50px;
      padding-right: 50px;
      margin-bottom: 24px;

      display: flex;
      align-items: center;

      .profile-right-item {
        flex: 1;

        .profile-right-input-title {
          font-size: 16px;
          font-weight: 400;
          color: #000000;
        }

        .profile-right-input-content {
          margin-top: 8px;
          height: 50px;
          border-radius: 4px;

          /deep/ .el-input__inner {
            border: 0px solid gray !important;
            border-radius: 4px !important;
            font-size: 16px !important;
            font-weight: 400 !important;
            line-height: 50px !important;
            height: 50px !important;
            color: #0e2845 !important;
          }

          /deep/ .el-input__suffix .el-input__clear {
            font-size: 20px !important;
            margin-top: 1px;
            margin-right: 8px;
          }

          /deep/ .el-input__inner::placeholder {
            color: #cccccc;
          }
          /* 谷歌 */
          /deep/ .el-input__inner::-webkit-input-placeholder {
            color: #cccccc;
          }
          /* 火狐 */
          /deep/ .el-input__inner:-moz-placeholder {
            color: #cccccc;
          }
          /deep/ /*ie*/
          .el-input__inner:-ms-input-placeholder {
            color: #cccccc;
          }
        }

        .profile-right-input-content-t {
          margin-top: 8px;
          border-radius: 4px;

          /deep/ .el-textarea__inner {
            border: 0px solid gray !important;
            border-radius: 4px !important;
            font-size: 16px !important;
            font-weight: 400 !important;
            color: #0e2845 !important;
          }
        }
      }
    }

    .profile-right-save-btn {
      width: 214px;
      line-height: 56px;
      border-radius: 4px;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      color: #fafafa;
      background: #ff7d45;
    }
  }

  .payment-input-selector {
    margin-top: 8px;
    height: 50px;
    border-radius: 4px;

    /deep/ .el-input__inner {
      border: 0px solid gray !important;
      border-radius: 4px !important;
      font-size: 16px !important;
      font-weight: 400 !important;
      line-height: 50px !important;
      height: 50px !important;
      color: #0e2845 !important;
    }

    /deep/ .el-input__icon {
      line-height: 50px !important;
    }

    /deep/ .el-select .el-input .el-select__caret {
      color: #535a63 !important;
      font-weight: bold;
    }

    /deep/ .el-icon-arrow-down {
      color: #535a63 !important;
      font-weight: bold;
    }
  }

  .require-input {
    color: red;
    margin-right: 4px;
  }
}
</style>
